import React, { Component } from 'react';
import Color from './components/Color'
import Size from './components/Size'
class App extends Component {
  // 定义状态
  state = { msg:"组件传参",color:'#ff0000',size:28}
  // 修改颜色状态的方法
  setColor=color=>this.setState({color})
  // 修改大小状态的方法
  setSize = size=>this.setState({size})
  render() { 
    return ( <div>
      {/* 使用状态 控制颜色与大小 */}
      <p style={{
        color:this.state.color,
        fontSize:this.state.size+'px'}}>
      {this.state.msg}</p>
      {/* 传递颜色与修改颜色的方法给子组件 */}
      <Color setColor={this.setColor}>
        <p>组件的插槽</p>
      </Color>
      <Size 
      setSize={this.setSize}
      size={this.state.size}></Size>

    </div> );
  }
}
 
export default App;